<template>
  <div
    :class="ui.modelClass"
    class="full-width row no-wrap"
    style="height: 50px"
  >
    <q-btn
      flat
      icon="clear"
      style="width: 50px"
      @click="exit()"
      v-show="needExit"
    />
    <q-scroll-area
      ref="scrollAreaRef"
      :style="
        needAdd && needExit
          ? { width: 'calc(100vw - 100px)' }
          : needAdd || needExit
          ? { width: 'calc(100vw - 50px)' }
          : { width: '100vw' }
      "
    >
      <div class="row no-wrap">
        <div
          v-for="item in list"
          :key="item"
          class="q-pa-sm"
          style="width: 100px; height: 50px"
        >
          <q-btn
            class="text-over"
            :class="activeId === item.id ? 'bg-light-blue-6' : 'bg-grey-blue'"
            :label="item.name"
            @click="choose(item)"
            style="width: 80px"
          />
        </div>
      </div>
    </q-scroll-area>
    <q-btn
      flat
      icon="add"
      style="width: 50px"
      @click="add()"
      v-show="needAdd"
    />
  </div>
</template>

<script setup>
import { useUiStore } from "stores/ui";
import { ref } from "vue";

const props = defineProps({
  needExit: { type: Boolean, default: true },
  needAdd: { type: Boolean, default: true },
  list: { type: Array, default: () => [] },
  activeId: { type: String, default: "" },
});
const emit = defineEmits(["exit", "choose", "add"]);

defineExpose({ scrollTo });

const ui = useUiStore();
const scrollAreaRef = ref();

function scrollTo(position) {
  switch (position) {
    case "start":
      scrollAreaRef.value.setScrollPosition("horizontal", 0, 300);
      break;
    case "end":
      scrollAreaRef.value.setScrollPosition(
        "horizontal",
        (props.list.length + 1) * 100,
        300
      );
      break;
    default:
      break;
  }
}
function exit() {
  emit("exit");
}
function choose(value) {
  emit("choose", value);
}
function add() {
  emit("add", "portrait");
}
</script>

<style lang="scss" scoped></style>
